// 加载基础样式
function loadBaseStyles() {
    const style = document.createElement('style');
    style.textContent = `
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 20px;
            min-height: 100vh;
            color: #fff;
            overflow-x: hidden;
        }
        
        @keyframes twinkle {
            0%, 100% { opacity: 0.3; }
            50% { opacity: 1; }
        }
        
        @keyframes shooting {
            0% { 
                transform: translateX(0) rotate(45deg);
                opacity: 1;
            }
            70% { opacity: 1; }
            100% { 
                transform: translateX(100vw) rotate(45deg);
                opacity: 0;
            }
        }
        
        .star {
            position: fixed;
            background: white;
            border-radius: 50%;
            box-shadow: 0 0 10px 1px rgba(255,255,255,0.8);
            z-index: -1;
        }
        
        .meteor {
            position: fixed;
            background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.8));
            z-index: -1;
            opacity: 0;
            border-radius: 50%;
        }
        
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
            z-index: -2;
        }
        
        /* 其他样式规则保持不变 */
    `;
    document.head.appendChild(style);
}

// 创建星空效果
function createStarfield() {
    // 创建500颗星星
    const starCount = 500;
    for (let i = 0; i < starCount; i++) {
        const star = document.createElement('div');
        star.className = 'star';
        
        // 随机大小(1-4px)
        const size = 1 + Math.random() * 3;
        star.style.width = `${size}px`;
        star.style.height = `${size}px`;
        
        // 随机位置
        star.style.left = `${Math.random() * 100}vw`;
        star.style.top = `${Math.random() * 100}vh`;
        
        // 随机透明度动画
        const duration = 2 + Math.random() * 3;
        const delay = Math.random() * 5;
        star.style.animation = `twinkle ${duration}s ease-in-out ${delay}s infinite`;
        
        // 随机亮度
        star.style.opacity = 0.3 + Math.random() * 0.7;
        
        document.body.appendChild(star);
    }

    // 创建流星
    createShootingStars();
}

// 创建流星效果
function createShootingStars() {
    const meteorCount = 8; // 增加流星数量
    
    // 确保流星样式已定义
    const style = document.createElement('style');
    style.textContent = `
        @keyframes shootingStar {
            0% {
                transform: translateX(-100px) translateY(-100px) rotate(-45deg);
                opacity: 1;
            }
            100% {
                transform: translateX(100vw) translateY(100vh) rotate(-45deg);
                opacity: 0;
            }
        }
        .meteor {
            position: fixed;
            width: 150px;
            height: 2px;
            background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.8));
            border-radius: 50%;
            filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.8));
            z-index: -1;
            animation: shootingStar 1s linear infinite;
        }
    `;
    document.head.appendChild(style);

    for (let i = 0; i < meteorCount; i++) {
        const meteor = document.createElement('div');
        meteor.className = 'meteor';
        
        // 随机起始位置
        meteor.style.left = `${Math.random() * 100}vw`;
        meteor.style.top = `${Math.random() * 100}vh`;
        
        // 随机动画延迟和持续时间
        const delay = Math.random() * 15;
        const duration = 0.5 + Math.random() * 1;
        meteor.style.animation = `shootingStar ${duration}s linear ${delay}s infinite`;
        
        document.body.appendChild(meteor);
    }
}

// 初始化应用
function initApp() {
    console.log('应用初始化开始');
    createStarfield();
    loadBaseStyles();
    renderForm();
    bindFormEvents();
    console.log('应用初始化完成');
}

// 渲染表单
function renderForm() {
    const formContainer = document.getElementById('form-container');
    if (!formContainer) {
        console.error('找不到表单容器');
        return;
    }

    formContainer.innerHTML = `
        <form id="compatibility-form" style="max-width:800px;margin:0 auto;">
            <h3 style="text-align:center;margin-bottom:30px;font-size:1.5em;color:#fff;">情侣契合度评估问卷</h3>
            
            <div style="display:flex;flex-wrap:wrap;gap:30px;justify-content:center;">
                <!-- 基本信息 -->
                <div style="flex:1;min-width:300px;background:rgba(255,255,255,0.05);padding:25px;border-radius:12px;border:1px solid rgba(255,255,255,0.1)">
                    <h4 style="color:#ff7eb3;margin-top:0;text-align:center;">基本信息</h4>
                    
                    <div style="margin-bottom:20px;">
                        <label style="display:block;margin-bottom:8px;font-weight:bold;color:#fff;">您的姓名</label>
                        <input type="text" name="person1-name" required style="width:100%;">
                    </div>
                    
                    <div style="margin-bottom:20px;">
                        <label style="display:block;margin-bottom:8px;font-weight:bold;color:#fff;">伴侣姓名</label>
                        <input type="text" name="person2-name" required style="width:100%;">
                    </div>
                    
                    <div style="margin-bottom:20px;">
                        <label style="display:block;margin-bottom:8px;font-weight:bold;color:#fff;">您的农历生日</label>
                        <div style="display:flex;gap:10px;">
                            <select name="lunar-year1" style="flex:1;padding:10px;border-radius:6px;background:rgba(0,0,0,0.2);color:#fff;border:1px solid rgba(255,255,255,0.2);">
                                ${generateYearOptions()}
                            </select>
                            <select name="lunar-month1" style="flex:1;padding:10px;border-radius:6px;background:rgba(0,0,0,0.2);color:#fff;border:1px solid rgba(255,255,255,0.2);">
                                ${generateMonthOptions()}
                            </select>
                            <select name="lunar-day1" style="flex:1;padding:10px;border-radius:6px;background:rgba(0,0,0,0.2);color:#fff;border:1px solid rgba(255,255,255,0.2);">
                                ${generateDayOptions()}
                            </select>
                        </div>
                    </div>
                    
                    <div style="margin-bottom:20px;">
                        <label style="display:block;margin-bottom:8px;font-weight:bold;color:#fff;">伴侣农历生日</label>
                        <div style="display:flex;gap:10px;">
                            <select name="lunar-year2" style="flex:1;padding:10px;border-radius:6px;background:rgba(0,0,0,0.2);color:#fff;border:1px solid rgba(255,255,255,0.2);">
                                ${generateYearOptions()}
                            </select>
                            <select name="lunar-month2" style="flex:1;padding:10px;border-radius:6px;background:rgba(0,0,0,0.2);color:#fff;border:1px solid rgba(255,255,255,0.2);">
                                ${generateMonthOptions()}
                            </select>
                            <select name="lunar-day2" style="flex:1;padding:10px;border-radius:6px;background:rgba(0,0,0,0.2);color:#fff;border:1px solid rgba(255,255,255,0.2);">
                                ${generateDayOptions()}
                            </select>
                        </div>
                    </div>
                    
                    <div style="margin-bottom:20px;">
                        <label style="display:block;margin-bottom:8px;font-weight:bold;color:#fff;">相识时间</label>
                        <select name="meet-time" style="width:100%;padding:10px;border-radius:6px;background:rgba(0,0,0,0.2);color:#fff;border:1px solid rgba(255,255,255,0.2);">
                            <option value="3">3个月以内</option>
                            <option value="6">3-6个月</option>
                            <option value="12" selected>6-12个月</option>
                            <option value="24">1-2年</option>
                            <option value="60">2-5年</option>
                            <option value="120">5年以上</option>
                        </select>
                    </div>
                </div>
                
                <!-- 关系评估 -->
                <div style="flex:1;min-width:300px;background:rgba(255,255,255,0.05);padding:25px;border-radius:12px;border:1px solid rgba(255,255,255,0.1)">
                    <h4 style="color:#7eb3ff;margin-top:0;text-align:center;">关系评估</h4>
                    
                    <div style="margin-bottom:20px;">
                        <label style="display:block;margin-bottom:8px;font-weight:bold;color:#fff;">核心价值观与人生目标的契合度</label>
                        <select name="value-goal" style="width:100%;padding:10px;border-radius:6px;background:rgba(0,0,0,0.2);color:#fff;border:1px solid rgba(255,255,255,0.2);">
                            <option value="20">差异很大</option>
                            <option value="40">有些差异</option>
                            <option value="60" selected>基本一致</option>
                            <option value="80">非常契合</option>
                            <option value="100">完美匹配</option>
                        </select>
                    </div>
                    
                    <div style="margin-bottom:20px;">
                        <label style="display:block;margin-bottom:8px;font-weight:bold;color:#fff;">沟通与冲突处理能力</label>
                        <select name="communication" style="width:100%;padding:10px;border-radius:6px;background:rgba(0,0,0,0.2);color:#fff;border:1px solid rgba(255,255,255,0.2);">
                            <option value="20">经常争吵</option>
                            <option value="40">偶尔有摩擦</option>
                            <option value="60" selected>能够有效沟通</option>
                            <option value="80">沟通顺畅</option>
                            <option value="100">完美沟通</option>
                        </select>
                    </div>
                    
                    <div style="margin-bottom:20px;">
                        <label style="display:block;margin-bottom:8px;font-weight:bold;color:#fff;">生活习惯与日常相处</label>
                        <select name="daily-life" style="width:100%;padding:10px;border-radius:6px;background:rgba(0,0,0,0.2);color:#fff;border:1px solid rgba(255,255,255,0.2);">
                            <option value="20">很不适应</option>
                            <option value="40">需要调整</option>
                            <option value="60" selected>基本和谐</option>
                            <option value="80">相处愉快</option>
                            <option value="100">完美互补</option>
                        </select>
                    </div>
                </div>
                
                <!-- 未来规划 -->
                <div style="flex:1;min-width:300px;background:rgba(255,255,255,0.05);padding:25px;border-radius:12px;border:1px solid rgba(255,255,255,0.1)">
                    <h4 style="color:#a37eb3;margin-top:0;text-align:center;">未来规划</h4>
                    
                    <div style="margin-bottom:20px;">
                        <label style="display:block;margin-bottom:8px;font-weight:bold;color:#fff;">未来规划一致性</label>
                        <select name="future-plan" style="width:100%;padding:10px;border-radius:6px;background:rgba(0,0,0,0.2);color:#fff;border:1px solid rgba(255,255,255,0.2);">
                            <option value="20">完全不同</option>
                            <option value="40">部分一致</option>
                            <option value="60" selected>大体相同</option>
                            <option value="80">高度一致</option>
                            <option value="100">完美契合</option>
                        </select>
                    </div>
                    
                    <div style="margin-bottom:20px;">
                        <label style="display:block;margin-bottom:8px;font-weight:bold;color:#fff;">重大决策方式</label>
                        <select name="decision-making" style="width:100%;padding:10px;border-radius:6px;background:rgba(0,0,0,0.2);color:#fff;border:1px solid rgba(255,255,255,0.2);">
                            <option value="20">独自决定</option>
                            <option value="40">偶尔商量</option>
                            <option value="60" selected>经常讨论</option>
                            <option value="80">共同决策</option>
                            <option value="100">完美协作</option>
                        </select>
                    </div>
                    
                    <div style="margin-bottom:20px;">
                        <label style="display:block;margin-bottom:8px;font-weight:bold;color:#fff;">关系责任感</label>
                        <select name="responsibility" style="width:100%;padding:10px;border-radius:6px;background:rgba(0,0,0,0.2);color:#fff;border:1px solid rgba(255,255,255,0.2);">
                            <option value="20">缺乏责任感</option>
                            <option value="40">需要加强</option>
                            <option value="60" selected>基本尽责</option>
                            <option value="80">高度负责</option>
                            <option value="100">完全信任</option>
                        </select>
                    </div>
                </div>
            </div>
            
            <div style="text-align:center;margin-top:40px;">
                <button type="submit" class="btn-submit" style="padding:12px 30px;border-radius:50px;background:linear-gradient(45deg, #ff758c, #ff7eb3);color:white;border:none;cursor:pointer;font-size:16px;font-weight:bold;box-shadow:0 4px 15px rgba(255, 117, 140, 0.3);transition:all 0.3s;">
                    计算契合度
                </button>
            </div>
        </form>
    `;
}

// 绑定表单事件
function bindFormEvents() {
    const form = document.getElementById('compatibility-form');
    if (!form) {
        console.error('找不到表单元素');
        return;
    }

    form.addEventListener('submit', function(e) {
        e.preventDefault();
        calculateCompatibility();
    });
}

// 生成年份选项
function generateYearOptions() {
    let options = '';
    const currentYear = new Date().getFullYear();
    for (let year = currentYear - 50; year <= currentYear; year++) {
        options += `<option value="${year}">${year}年</option>`;
    }
    return options;
}

// 生成月份选项
function generateMonthOptions() {
    let options = '';
    for (let month = 1; month <= 12; month++) {
        options += `<option value="${month}">${month}月</option>`;
    }
    return options;
}

// 生成日期选项
function generateDayOptions() {
    let options = '';
    for (let day = 1; day <= 31; day++) {
        options += `<option value="${day}">${day}日</option>`;
    }
    return options;
}

// 计算生肖
function getChineseZodiac(year) {
    const zodiacs = ['鼠','牛','虎','兔','龙','蛇','马','羊','猴','鸡','狗','猪'];
    return zodiacs[(year - 4) % 12];
}

// 生肖配对评分
function zodiacCompatibility(zodiac1, zodiac2) {
    const compatibilityMap = {
        '鼠': { good: ['牛','龙','猴'], bad: ['马','兔','羊'] },
        '牛': { good: ['鼠','蛇','鸡'], bad: ['羊','马','狗'] },
        '虎': { good: ['马','狗','猪'], bad: ['猴','蛇'] },
        '兔': { good: ['羊','狗','猪'], bad: ['鸡','鼠','龙'] },
        '龙': { good: ['鼠','猴','鸡'], bad: ['狗','兔'] },
        '蛇': { good: ['牛','鸡'], bad: ['虎','猪','猴'] },
        '马': { good: ['虎','羊','狗'], bad: ['鼠','牛'] },
        '羊': { good: ['兔','马','猪'], bad: ['牛','狗'] },
        '猴': { good: ['鼠','龙'], bad: ['虎','蛇','猪'] },
        '鸡': { good: ['牛','龙','蛇'], bad: ['兔','狗'] },
        '狗': { good: ['虎','兔','马'], bad: ['牛','龙','羊','鸡'] },
        '猪': { good: ['虎','兔','羊'], bad: ['蛇','猴'] }
    };

    // 检查生肖是否有效
    if (!compatibilityMap[zodiac1] || !compatibilityMap[zodiac2]) {
        console.error('无效的生肖:', zodiac1, zodiac2);
        return 70; // 默认中等评分
    }

    // 相同生肖
    if (zodiac1 === zodiac2) return 80;
    
    // 检查相合生肖
    if (compatibilityMap[zodiac1].good.includes(zodiac2)) return 90;
    
    // 检查相克生肖
    if (compatibilityMap[zodiac1].bad.includes(zodiac2)) return 40;
    
    return 70; // 普通配对
}

// 计算契合度
function calculateCompatibility() {
    const form = document.getElementById('compatibility-form');
    if (!form) {
        console.error('找不到表单元素');
        return;
    }

    // 特别匹配检测
    const isSpecialCouple = 
        (form['person1-name'].value === '刘乘昊' && form['person2-name'].value === '何昕灿') ||
        (form['person1-name'].value === '何昕灿' && form['person2-name'].value === '刘乘昊');

    if (isSpecialCouple) {
        showResult({}, 100, true);
        return;
    }

    // 获取农历生日
    const lunarData = {
        year1: parseInt(form['lunar-year1'].value),
        month1: parseInt(form['lunar-month1'].value),
        day1: parseInt(form['lunar-day1'].value),
        year2: parseInt(form['lunar-year2'].value),
        month2: parseInt(form['lunar-month2'].value),
        day2: parseInt(form['lunar-day2'].value)
    };
    
    // 计算生肖
    const zodiac1 = getChineseZodiac(lunarData.year1);
    const zodiac2 = getChineseZodiac(lunarData.year2);
    const zodiacScore = zodiacCompatibility(zodiac1, zodiac2);
    
    // 计算各项得分
    const scores = {
        values: parseInt(form['value-goal'].value),
        communication: parseInt(form['communication'].value),
        dailyLife: parseInt(form['daily-life'].value),
        futurePlan: parseInt(form['future-plan'].value),
        decisionMaking: parseInt(form['decision-making'].value),
        responsibility: parseInt(form['responsibility'].value),
        meetTime: getMeetTimeScore(parseInt(form['meet-time'].value)),
        zodiac: zodiacScore,
        lunarData: lunarData, // 添加农历数据
        zodiac1: zodiac1,    // 生肖1
        zodiac2: zodiac2     // 生肖2
    };

    // 综合得分 (加权计算)
    const totalScore = Math.round(
        scores.values * 0.2 +
        scores.communication * 0.2 +
        scores.dailyLife * 0.15 +
        scores.futurePlan * 0.15 +
        scores.decisionMaking * 0.1 +
        scores.responsibility * 0.1 +
        scores.meetTime * 0.05 +
        scores.zodiac * 0.15
    );

    showResult(scores, totalScore, false);
}

// 相识时间得分计算
function getMeetTimeScore(months) {
    if (months < 3) return 30;
    if (months < 6) return 50;
    if (months < 12) return 60;
    if (months < 24) return 70;
    if (months < 60) return 80;
    return 90;
}

// 显示结果动画
function showResult(formData, totalScore, isSpecial) {
    document.getElementById('form-container').style.display = 'none';
    document.getElementById('result-container').style.display = 'block';

    // 创建进度条容器
    const progressContainer = document.createElement('div');
    progressContainer.style.width = '100%';
    progressContainer.style.height = '30px';
    progressContainer.style.backgroundColor = 'rgba(255,255,255,0.1)';
    progressContainer.style.borderRadius = '15px';
    progressContainer.style.margin = '20px 0';
    progressContainer.style.overflow = 'hidden';
    
    // 创建进度条
    const progressBar = document.createElement('div');
    progressBar.id = 'compatibility-bar';
    progressBar.style.height = '100%';
    progressBar.style.width = '0%';
    progressBar.style.borderRadius = '15px';
    progressBar.style.background = 'linear-gradient(90deg, #ff758c, #ff7eb3)';
    progressBar.style.transition = 'width 0.1s linear';
    progressBar.style.display = 'flex';
    progressBar.style.alignItems = 'center';
    progressBar.style.justifyContent = 'center';
    progressBar.style.color = 'white';
    progressBar.style.fontWeight = 'bold';
    progressBar.textContent = '0%';
    
    progressContainer.appendChild(progressBar);
    document.getElementById('result-container').prepend(progressContainer);

    // 动画显示百分比 - 优化版
    const duration = 2000; // 动画总时长(ms)
    const startTime = Date.now();
    
    function animateProgress() {
        const elapsed = Date.now() - startTime;
        const progress = Math.min(elapsed / duration, 1);
        const currentPercentage = Math.floor(progress * totalScore);
        
        progressBar.style.width = `${progress * 100}%`;
        progressBar.textContent = `${currentPercentage}%`;
        
        if (progress < 1) {
            requestAnimationFrame(animateProgress);
        } else {
            progressBar.textContent = `${totalScore}%`;
            showAnalysis(formData, totalScore, isSpecial);
        }
    }
    
    animateProgress();
}

// 星座契合度计算
function calculateZodiacCompatibility(birthday1, birthday2) {
    const zodiac1 = getZodiacSign(birthday1);
    const zodiac2 = getZodiacSign(birthday2);
    
    if (!zodiac1 || !zodiac2) return 50;
    if (zodiac1.name === zodiac2.name) return 90;
    if (zodiac1.element === zodiac2.element) return 80;
    if ((zodiac1.element === '火' && zodiac2.element === '风') || 
        (zodiac1.element === '风' && zodiac2.element === '火')) return 70;
    if ((zodiac1.element === '土' && zodiac2.element === '水') || 
        (zodiac1.element === '水' && zodiac2.element === '土')) return 70;
    return 50;
}

// 身高契合度计算
function calculateHeightCompatibility(height1, height2) {
    const diff = Math.abs(height1 - height2);
    if (diff <= 5) return 100;
    if (diff <= 10) return 80;
    if (diff <= 15) return 60;
    return 40;
}

// 体重契合度计算
function calculateWeightCompatibility(weight1, weight2) {
    const ratio = Math.max(weight1, weight2) / Math.min(weight1, weight2);
    if (ratio <= 1.1) return 100;
    if (ratio <= 1.3) return 80;
    if (ratio <= 1.5) return 60;
    return 40;
}

// 生日契合度计算
function calculateBirthdayCompatibility(birthday1, birthday2) {
    const [m1, d1] = birthday1.split('-').map(Number);
    const [m2, d2] = birthday2.split('-').map(Number);
    
    if (m1 === m2 && d1 === d2) return 100;
    if (m1 === m2) return 80;
    const monthDiff = Math.abs(m1 - m2);
    if (monthDiff <= 3 || monthDiff >= 9) return 60;
    return 40;
}

// 显示分析结果
function showAnalysis(scores, totalScore, isSpecial) {
    let analysisHTML;
    
    if (isSpecial) {
        // 创建烟花容器
        const fireworksContainer = document.createElement('div');
        fireworksContainer.id = 'fireworks-container';
        fireworksContainer.style.position = 'fixed';
        fireworksContainer.style.top = '0';
        fireworksContainer.style.left = '0';
        fireworksContainer.style.width = '100%';
        fireworksContainer.style.height = '100%';
        fireworksContainer.style.pointerEvents = 'none';
        fireworksContainer.style.zIndex = '999';
        document.body.appendChild(fireworksContainer);

        // 启动烟花效果
        createFireworks();

        analysisHTML = `
        <div class="analysis" style="background:linear-gradient(135deg, #fff9f9, #ffe6f2);padding:30px;border-radius:15px;box-shadow:0 10px 30px rgba(255,105,180,0.3);position:relative;z-index:1000;">
            <h3 style="color:#ff1493;text-align:center;font-size:2em;margin-bottom:20px;">✨ 天造地设 ✨</h3>
            
            <div style="text-align:center;margin-bottom:25px;">
                <p style="font-size:1.5em;color:#ff1493;font-weight:bold;">刘乘昊 & 何昕灿</p>
                <p style="font-style:italic;color:#555;">"在千万人中遇见你，是命运最美的安排"</p>
            </div>
            
            <div style="background:white;padding:15px;border-radius:10px;margin-bottom:20px;">
                <p style="text-align:center;font-size:2.5em;color:#ff1493;font-weight:bold;margin:0;">契合度: ${totalScore}%</p>
            </div>
            
            <div style="margin-bottom:20px;">
                <h4 style="color:#ff1493;border-bottom:2px dashed #ff1493;padding-bottom:8px;">星座分析</h4>
                <p>你们的星座组合是宇宙中最和谐的配对之一，彼此互补又相互吸引。</p>
            </div>
            
            <div style="margin-bottom:20px;">
                <h4 style="color:#ff1493;border-bottom:2px dashed #ff1493;padding-bottom:8px;">性格匹配</h4>
                <p>刘乘昊的稳重与何昕灿的活泼完美结合，形成最理想的性格互补。</p>
            </div>
            
            <div style="margin-bottom:20px;">
                <h4 style="color:#ff1493;border-bottom:2px dashed #ff1493;padding-bottom:8px;">未来预测</h4>
                <p>根据大数据分析，你们未来50年的幸福指数高达99.9%，是最令人羡慕的伴侣。</p>
            </div>
            
            <div style="text-align:center;margin-top:30px;">
                <p style="font-weight:bold;color:#ff1493;font-size:1.2em;">建议: 立即结婚！这是千年一遇的灵魂伴侣组合！</p>
                <p style="font-style:italic;color:#555;margin-bottom:15px;">"愿你们携手走过每一个春夏秋冬，直到白头"</p>
                <p style="color:#ff1493;font-size:1.1em;line-height:1.6;">
                    系统监测到你们在2025年9月20日相遇是上天的安排，<br>
                    因为你们天生一对天作之合天衣无缝，<br>
                    这是丘比特给予你们的奖励，<br>
                    愿你们在未来的日子天天开心，美满幸福，<br>
                    愿刘乘昊天天都爱何昕灿❤️
                </p>
            </div>
        </div>`;

        // 烟花效果函数
        function createFireworks() {
            const colors = ['#ff1493', '#00bfff', '#7cfc00', '#ffff00', '#ff8c00'];
            const container = document.getElementById('fireworks-container');
            
            for (let i = 0; i < 80; i++) { // 增加烟花数量
                setTimeout(() => {
                    const firework = document.createElement('div');
                    firework.style.position = 'absolute';
                    firework.style.width = '8px'; // 增大尺寸
                    firework.style.height = '8px';
                    firework.style.borderRadius = '50%';
                    const color = colors[Math.floor(Math.random() * colors.length)];
                    firework.style.backgroundColor = color;
                    firework.style.boxShadow = `0 0 15px 8px ${color}`; // 增强光晕
                    firework.style.left = `${Math.random() * 100}%`;
                    firework.style.top = `${Math.random() * 100}%`;
                    firework.style.transform = 'scale(0)';
                    firework.style.transition = 'transform 1s ease-out, opacity 2s'; // 延长动画时间
                    
                    container.appendChild(firework);
                    
                    // 触发动画
                    setTimeout(() => {
                        firework.style.transform = 'scale(30)'; // 增大绽放尺寸
                        firework.style.opacity = '0';
                    }, 50);
                    
                    // 移除元素
                    setTimeout(() => {
                        firework.remove();
                    }, 3000); // 延长显示时间
                }, i * 150); // 缩短发射间隔
            }
        }
    } else {
        // 获取专业建议
        const advice = getProfessionalAdvice(scores);
        
        analysisHTML = `
        <div class="analysis" style="background:rgba(255,255,255,0.05);padding:25px;border-radius:12px;border:1px solid rgba(255,255,255,0.1);">
            <h3 style="color:#fff;text-align:center;margin-top:0;">关系契合度分析报告</h3>
            <div style="display:flex;justify-content:center;margin-bottom:20px;">
                <div style="font-size:3em;color:#ff7eb3;font-weight:bold;">${totalScore}%</div>
            </div>
            
            <div style="margin-bottom:20px;">
                <h4 style="color:#7eb3ff;border-bottom:1px solid rgba(255,255,255,0.2);padding-bottom:8px;">优势领域</h4>
                <ul style="padding-left:20px;">
                    ${advice.strengths.map(s => `<li>${s}</li>`).join('')}
                </ul>
            </div>
            
            <div style="margin-bottom:20px;">
                <h4 style="color:#ff7eb3;border-bottom:1px solid rgba(255,255,255,0.2);padding-bottom:8px;">改进建议</h4>
                <ul style="padding-left:20px;">
                    ${advice.improvements.map(i => `<li>${i}</li>`).join('')}
                </ul>
            </div>
            
            <div style="margin-bottom:20px;">
                <h4 style="color:#a37eb3;border-bottom:1px solid rgba(255,255,255,0.2);padding-bottom:8px;">📈 未来6个月行动计划</h4>
                <ol style="padding-left:20px;">
                    ${advice.actionPlan.map(a => `<li style="margin-bottom:8px;">${a}</li>`).join('')}
                </ol>
            </div>
            
            <div style="background:rgba(255,255,255,0.1);padding:15px;border-radius:8px;margin-top:20px;">
                <h4 style="color:#a37eb3;margin-top:0;">传统婚配分析</h4>
                <p>生肖配对: ${scores.zodiac1} (${scores.lunarData.year1}年) 和 ${scores.zodiac2} (${scores.lunarData.year2}年)</p>
                <p>${getZodiacCompatibilityText(scores.zodiac1, scores.zodiac2)}</p>
            </div>
            
            <div style="background:rgba(255,255,255,0.1);padding:15px;border-radius:8px;margin-top:20px;">
                <h4 style="color:#a37eb3;margin-top:0;">专业建议</h4>
                <p>${advice.summary}</p>
            </div>
        </div>`;
    }
    
    document.getElementById('analysis-result').innerHTML = analysisHTML;
}

// 获取生肖配对描述
function getZodiacCompatibilityText(zodiac1, zodiac2) {
    const compatibilityText = {
        '鼠牛': '鼠牛相配，天作之合，家道昌隆',
        '虎猪': '虎猪相配，同心永结，德高望重',
        // 其他生肖配对描述...
    };
    
    const key = zodiac1 + zodiac2;
    return compatibilityText[key] || `${zodiac1}和${zodiac2}配对，属于中等婚配，需要双方共同努力经营`;
}

// 获取专业建议
function getProfessionalAdvice(scores) {
    const advice = {
        strengths: [],
        improvements: [],
        actionPlan: [],
        summary: ''
    };
    
    // 详细优势分析
    if (scores.values >= 80) {
        advice.strengths.push("核心价值观高度一致：你们对生活目标、价值观念有着惊人的相似度");
    } else if (scores.values >= 60) {
        advice.strengths.push("核心价值观基本一致：虽然有些差异，但核心价值观念是相通的");
    }
    
    if (scores.communication >= 80) {
        advice.strengths.push("沟通能力优秀：你们能够坦诚交流，有效解决分歧");
    } else if (scores.communication >= 60) {
        advice.strengths.push("沟通能力良好：能够进行基本有效沟通，偶尔会有误解");
    }
    
    if (scores.futurePlan >= 80) {
        advice.strengths.push("未来愿景契合：你们对未来的规划高度一致，这是长期关系的重要基础");
    } else if (scores.futurePlan >= 60) {
        advice.strengths.push("未来规划大体一致：主要方向相同，细节可以进一步协调");
    }
    
    // 详细改进建议
    if (scores.dailyLife < 60) {
        advice.improvements.push("日常生活协调：建议建立更和谐的生活习惯，如共同制定作息时间表");
        advice.actionPlan.push("每周安排2-3次共同进餐时间，增进日常互动");
    }
    
    if (scores.decisionMaking < 60) {
        advice.improvements.push("决策方式优化：重要决定前，建议预留足够时间进行充分讨论");
        advice.actionPlan.push("每月举行一次'关系会议'，讨论重要事项和未来计划");
    }
    
    if (scores.responsibility < 60) {
        advice.improvements.push("责任分担：可以更明确地分配家庭责任和义务");
        advice.actionPlan.push("共同制定责任清单，明确各自的分工和期望");
    }
    
    // 根据分数生成个性化总结
    if (scores.totalScore >= 80) {
        advice.summary = "你们的关系非常健康稳固，继续保持这种良好的互动模式。建议定期重温恋爱初期的美好回忆，为关系注入新鲜感。";
        advice.actionPlan.push("每月安排一次特别的约会日，重温美好时光");
    } else if (scores.totalScore >= 60) {
        advice.summary = "你们的关系有很好的基础，通过一些小的调整和改进，可以提升到更高水平。";
        advice.actionPlan.push("每周记录3件对方让你感动的事，并分享给对方");
    } else {
        advice.summary = "你们的关系需要更多投入和努力，但潜力巨大。建议从改善沟通开始，逐步建立更深层次的连接。";
        advice.actionPlan.push("每天花15分钟进行深度交流，分享当天的感受和想法");
    }
    
    // 添加通用建议
    advice.actionPlan.push("每季度进行一次关系评估，讨论进展和新的目标");
    advice.actionPlan.push("建立冲突解决机制，约定冷静期和沟通方式");
    
    return advice;
}

// 启动应用
document.addEventListener('DOMContentLoaded', initApp);